<template>
  <component :is="type"
             v-bind="linkProps">
    <slot />
  </component>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { isExternal } from '@/utils/validate'
export default defineComponent({
  name: 'SidebarItemLink',
  props: {
    to: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 判断接收的路径是否是外链
    const isExt = computed(() => isExternal(props.to))
    const type = computed(() => {
      if (isExt.value) {
        return 'a'
      }
      return 'router-link'
    }) // 外链使用a标签，否则是router-link
    const linkProps = computed(() => {
      if (isExt.value) {
        return {
          // a 标签的一些原生属性
          href: props.to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return { to: props.to }
    })
    return {
      type,
      linkProps
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
